<template>

  <div>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="发送消息"
      width="50%"
      @close="handleClose"
    >

      <el-form ref="dataForm" :model="dataForm" :rules="rules" label-position="left" label-width="100px">

        <el-form-item label="消息模板" prop="tmplId">
          <msg-tmpl-select v-model="dataForm.tmplId"/>
        </el-form-item>

        <el-form-item v-if="tmplData.imOn" label="接收用户">
          <user-select v-model="dataForm.userId" style="width: 100%"/>
        </el-form-item>

        <el-form-item v-if="tmplData.smsOn" label="接收手机号">
          <el-input v-model="dataForm.mobile" size="small" placeholder="不发送此类消息请留空！" />
        </el-form-item>

        <el-form-item v-if="tmplData.emailOn" label="接收邮箱">
          <el-input v-model="dataForm.email" size="small" placeholder="不发送此类消息请留空！"/>
        </el-form-item>

        <div v-if="tmplData.props && tmplData.props.length > 0" style="padding-top: 10px">
          <h3>消息参数</h3>

          <el-table
            :data="tmplData.props"
            border
            stripe
            style="width: 100%">

            <el-table-column
              prop="prop"
              label="参数名称"/>

            <el-table-column
              prop="value"
              label="参数值">
              <template v-slot="scope">
                <el-input v-model="scope.row.value" size="small"/>
              </template>
            </el-table-column>

            <el-table-column
              prop="remark"
              label="参数描述"/>
          </el-table>

        </div>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import { fetchDetail } from '@/api/notify/tmpl'
import { testSend } from '@/api/notify/msg'

import MsgTmplSelect from '@/components/MsgTmplSelect'
import UserSelect from '@/components/UserSelect'

export default {
  name: 'TestMsgDialog',
  components: { UserSelect, MsgTmplSelect },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    tmplId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      rules: {
        tmplId: [
          { required: true, message: '消息模板不能为空！' }
        ]
      },
      mobileStr: '',
      emailStr: '',
      dataForm: {
        tmplId: '',
        users: [],
        emails: [],
        mobiles: []
      },
      tmplData: {},

      userDialog: false
    }
  },
  watch: {
    // 检测查询变化
    dialogShow: {
      handler() {
        this.dialogVisible = this.dialogShow
      },
      deep: true
    },
    'dataForm.tmplId': {
      handler(val) {
        this.fetchTmpl(val)
      }
    },
    tmplId: {
      handler(val) {
        if (val) {
          this.dataForm.tmplId = val
        }
      }
    }
  },
  created() {
    this.dialogVisible = this.dialogShow
    if (this.tmplId) {
      this.dataForm.tmplId = this.tmplId
    }
  },
  methods: {

    handleClose() {
      this.$emit('update:dialogShow', false)
    },

    // 获取模板信息
    fetchTmpl(tmplId) {
      fetchDetail(tmplId).then(res => {
        this.tmplData = res.data
      })
    },

    handleSave() {
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          return
        }

        // 构建模板参数
        const props = this.tmplData.props
        if (props && props.length > 0) {
          const params = {}
          for (let i = 0; i<props.length; i++) {
            params[props[i].prop] = props[i].value
          }
          this.dataForm.params = params
        }

        console.log(this.dataForm)

        this.loading = true
        testSend(this.dataForm).then(() => {
          this.$notify({
            title: '成功',
            message: '测试消息已提交，请在消息列表查看发送情况！',
            type: 'success',
            duration: 2000
          })

          this.dataForm = { tmplId: this.dataForm.tmplId }
          this.dialogShow = false
        })
        this.loading = false
      })
    },

    // 添加到列表
    userSelected(ids, objs) {
      this.dataForm.users = ids

      const mobiles = []
      const emails = []
      for (let i = 0; i<objs.length; i++) {
        const mobile = objs[i].mobile
        const email = objs[i].email
        if (mobile) {
          mobiles.push(objs[i].mobile)
        }
        if (email) {
          emails.push(objs[i].email)
        }
      }

      this.dataForm.mobiles = mobiles
      this.dataForm.emails = emails
    }
  }
}
</script>

<style scoped>
.doc {
  background: #f0f0f0;
  padding: 8px;
  margin-bottom: 20px;
  border-radius: 5px;
  margin-top: -10px;
}
</style>
